<template>
  <div class="">
    <el-dialog v-model="dialogFormVisible" title="修改密码" width="500" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
        <el-form-item prop="username" label="账号名">
          <el-input v-model="form.username" disabled/>
        </el-form-item>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="form.name" disabled/>
        </el-form-item>
        <el-form-item prop="oldPwd" label="原始密码">
          <el-input type="password" v-model="form.oldPwd"/>
        </el-form-item>
        <el-form-item prop="newPwd" label="新密码">
          <el-input type="password" v-model="form.newPwd" />
        </el-form-item>
        <el-form-item prop="confirmNewPwd" label="确认新密码">
          <el-input type="password" v-model="form.confirmNewPwd" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { getItem, clearAll } from '~/utils/localStorage'
  import { showMessage } from '~/utils/my-notification'
  import { ElMessageBox } from 'element-plus'
  import { updateOwenPwd } from '~/api/acl/user'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const dialogFormVisible = ref(false)
  const closeOnClickModal = ref(false)
  const formRef = ref(null)

  const form = reactive({
    id: 0,
    username: '',
    name: '',
    oldPwd: '',
    newPwd: '',
    confirmNewPwd: ''
  })
  const rules = {
    username: [
      { required: true, message: '账号名不能为空!', trigger: 'blur' },
      { min: 5, message: '请输入大于5位的字符', trigger: 'blur' },
    ],
    name: [
      { required: true, message: '姓名不能为空!', trigger: 'blur' },
      { min: 5, message: '请输入大于5位的字符', trigger: 'blur' },
    ],
    oldPwd: [
        { required: true, message: '原始密码不能为空!', trigger: 'blur' },
        { min: 6, message: '长度大于6个字符!', trigger: 'blur' }
    ],
    newPwd: [
        { required: true, message: '新密码不能为空!', trigger: 'blur' },
        { min: 6, message: '长度大于6个字符!', trigger: 'blur' }
    ],
    confirmNewPwd: [
        { required: true, message: '确认新密码不能为空!', trigger: 'blur' },
        { min: 6, message: '长度大于6个字符!', trigger: 'blur' }
    ]
  }

  const userInfo = getItem('userinfo')
  function init() {
    dialogFormVisible.value = true
    if(!userInfo) {
      showMessage('请先登录!', 'warning')
      return
    }
    const data = userInfo.data
    form.id = data.id
    form.username = data.username
    form.name = data.name
  }

  // 提交
  function onSubmit() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      ElMessageBox.confirm(`确定进行提交操作?`, '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        updateOwenPwd(form).then(res => {
          if(res && res.data.code === 200) {
            // 清楚所有缓存
            clearAll()
            // 跳转到登录页面
            router.push('/login')
            dialogFormVisible.value = false
          } else {
            showMessage(res.data.message, 'error')
          }
        })
      }).catch(err => {
        console.log(err)
      })
    })
  }

  // 将方法暴露给父组件
  defineExpose({
    init
  })
</script>
<style>
</style>
